<template>
  <div id='alertfoot'>
     <div class="comAlert" v-show="show">
         <div class="alertbox">
             <div class="alerttop">
                 <!-- <div class="box1" v-for="(item, index) in button" :key="index" @click="buttonClick(item.callback)"><img src="../assets/image/catalog.png">&nbsp;<span>{{ item.text }}</span></div> -->
                 <div class="box1" @click="buttonClick(button[0].callback)"><img src="../assets/image/catalog.png">&nbsp;<span>{{ button[0].text }}</span></div>
                 <div class="box1 box2"  @click="buttonClick(button[1].callback)"><img src="../assets/image/index11.png">&nbsp;<span>{{ button[1].text }}</span></div>
             </div>
             <div class="alertfoot" @click="show=false">取消</div>
         </div>
     </div> 
  </div>
</template>

<script>
export default {
  name: "alertfoot",
  data() {
    return {
      show: false,
      button: [
        {text:''},
        {text:''},
      ]
    };
  },

  computed: {},

  created() {},

  mounted() {
    this.$bus.$on('alertFoot', config => {
      if (!config) return (this.show = false);
      this.show = true;
      this.button = config.button;
    });
  },

  methods: {
    buttonClick (cb) {
      this.$bus.$emit('alertFoot', false);
      cb();
    }
  }
};
</script>
<style lang='scss' scoped>
#alertfoot {
  color: #000;
  .comAlert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: rgba(4, 4, 15, 0.4);
    .alertbox {
      width: 686px;
      height: 312px;
      position: absolute;
      bottom: 20px;
      left: 32px;
      .alerttop {
        height: 202px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        text-align: center;
        .box1 {
          height: 100px;
          line-height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            font-size: 28px;
          }
          img {
            width: 30px;
            height: 30px;
          }
        }
        .box2 {
          border-top: 1Px solid #eee;
          img {
            width: 40px;
            height: 36px;
          }
        }
      }
      .alertfoot {
        margin-top: 10px;
        height: 100px;
        font-size: 32px;
        text-align: center;
        line-height: 100px;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px;
      }
    }
  }
}
</style>